<template>
  <div id="app">
    <Top></Top>
    <div class="middle">
      <Aside></Aside>
      <Tasklist></Tasklist>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
// 导入组件
import Top from "./components/Top.vue";
import Aside from "./components/Aside.vue";
import Tasklist from "./components/Tasklist.vue";
import Bottom from "./components/Bottom.vue";
export default {
  name: "App",
  components: {
    Top,
    Aside,
    Tasklist,
    Bottom,
  },
};
</script>

<style scoped>
#app {
  width: 360px;
  height: 600px;
  border: 1px solid #ccc;
  margin: 60px auto;
  position: relative;
}
.middle{
  display: flex;
}
</style>
